<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>网点人员列表</title>

    <link href="../../../css/user/setting.css" rel="stylesheet"/>
    <link href="../../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../../css/common.css" rel="stylesheet"/>
    <script src="../../../js/vue.min.js"></script>
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/fastclick.js"></script>
    <script src="../../../js/api.js"></script>
    <script src="../../../js/common.js"></script>
    <style>
        .content-footer {
            position: fixed;
            bottom: 0;
            left: 0;
            height: 4rem;
            width: 100%;
            text-align: center;
        }

        .content-footer .left {
            float: left;
            width: 50%;
            line-height: 4rem;
            font-size: 1.3rem;
            background-color: #BFBFBF;
            color: #fff;
            border-right: 1px solid #fff;
        }

        .content-footer .right {
            float: right;
            width: 50%;
            line-height: 4rem;
            font-size: 1.3rem;
            background-color: #EF6060;
            color: #fff;
            border-left: 1px solid #fff;
        }

        @keyframes my-show {

            from {
                transform: scale(0.5);
                opacity: 0
            }
            to {
                transform: scale(1);
                opacity: 0.7;
            }

        }

        .group-title {
            line-height: 4rem;
            font-size: 1.2rem;
            font-weight: 400;
            color: #999;
            padding-left: 2rem;
            background-color: #F3F3F3;
        }

        .nav-search {
            width: 70% !important;
            border: none !important;
            background-color: #F3F3F3 !important;
            line-height: 3rem !important;
            font-size: 1.2rem !important;
            border-radius: 3rem !important;
        }

        #app {
            height: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="header-nav" style="height: 8rem;">
        <span><input class="nav-search" onkeydown="if(event.keyCode==13){vm.initList();}" v-model="conditionName"
                     type="text" placeholder="请输入您要查找的人员姓名/网点名称"></span>
        <div class="icon"><img src="../../../img/common/btn_back.png" alt=""></div>
        <div @click="dealPlus" class="right"><img src="../../../img/common/btn_plus.jpg" alt=""></div>
        <div v-show="plusMod" class="nav-select-list-box">
            <div class="icon-triangle"></div>
            <div @click="add" class="list-item">添加人员</div>
            <!--<div @click="del" class="list-item">删除人员</div>-->
        </div>
    </div>

    <div class="container setting " style='padding-top: 8rem;height:100%;overflow: auto'>
        <div class="card-box li">

            <div v-for="item in contactList">
                <div class="group-title">
                    {{item.insSideName}}
                </div>
                <div class="xlb-li">
                    <div v-for="item in item.list" @click="goInfo(item.id)">
                        <div class="left"><img v-show="delMod" @click="dealSelect(item.abutmentUserId)" class="icon"
                                               :src="chooseImg(item.abutmentUserId)" alt="">{{item.name}}
                        </div>
                        <div class="right">{{item.phone}} <img src="../../../img/common/btn_more.png" alt=""></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div v-show="delMod" class="content-footer">
        <div @click="dealDel" class="left">取消</div>
        <div @click="dealDel" class="right">删除</div>
    </div>
</div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            title: '首页',
            plusMod: false,
            delMod: false,
            contactList: [],
            selectedItems: [],
            conditionName: ''
        },
        methods: {
            dealPlus: function () {
                this.plusMod = !this.plusMod;
            },
            add: function () {
                this.dealPlus();
                redirect('pages/user/netperson/add.html');
            },
            del: function () {
                this.dealPlus();
                this.delMod = !this.delMod;
            },
            dealDel: function () {
                this.delMod = !this.delMod;
            },
            goInfo: function (userId) {
                if (this.delMod) {
                    return;
                }
                redirect('pages/user/netperson/info.html?userId=' + userId);
            },
            initList: function () {
                Resource.get(USER_CONTACT_NEW_API, {conditionName: this.conditionName}, function (res) {
                    vm.contactList = res;
                })
            },
            //打电话
            callPhone: function (phone) {
                goCallPhone(phone);
            },
            dealSelect: function (userId) {
                var arrays = this.selectedItems;
                var index = arrays.indexOf(userId)
                if (index < 0) { //添加新的
                    arrays.push(userId)
                } else {//删除已经选择
                    arrays.splice(index, 1)
                }
            },
            chooseImg: function (userId) {
                var index = this.selectedItems.indexOf(userId);
                if (index < 0) {
                    return '../../../img/common/ic_select_none.jpg';
                }
                return '../../../img/common/ic_select_done.jpg';
            }
        }
    });
    //监听初始化
    mui.plusReady(function () {
        vm.initList();
    });
    document.addEventListener('changeTab', function () {
        vm.initList();
    })
</script>
</body>
</html>
